<style lang="less">
  @import './login.less';
</style>
<template>
  <div class="login">
    <div class="wrap-banner">
      <vue-particles
        color="#ffffff"
        :particleOpacity="0.7"
        linesColor="#ffffff"
        :particlesNumber="80"
        shapeType="circle"
        :particleSize="5"
        :linesWidth="2"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
      >
      </vue-particles>
    </div>
    <div class="login-con">
      <Card icon="log-in" title="欢迎登录" :bordered="false">
        <div class="form-con">
          <login-form @on-success-valid="handleSubmit"></login-form>
          <p class="login-tip">输入用户名和密码</p>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
  import {mapMutations} from 'vuex'
  import LoginForm from '_c/login-form'
  export default {
    methods: {
      handleSubmit ({ userName, password }) {
        let url = '/api/oauth/token'
        let form = this.$qs.stringify({
          username: userName,
          password: password,
          client_id: 'client_2',
          client_secret: '123456',
          grant_type: 'password'
        })
        this.$post(url, form).then((res) => {
          localStorage.setItem('access_token', res.access_token)
          this.getInfo()
          setTimeout(() => {
            this.$router.push('/index')
          }, 500)
        }).catch((rel) => {
          if (rel.error === 'invalid_grant') {
            this.$Message.warning('账户名或密码错误')
          }
        })
      },
      getInfo() {
        this.$get('/api/user/getInfo').then((res) => {
          sessionStorage.setItem('role', res.role)
          sessionStorage.setItem('storeId', res.storeId)
          sessionStorage.setItem('storeName', res.storeName)
        })
      },
      ...mapMutations({
        setLoginInfo: 'SET_INFO'
      })
    },
    components: {
      LoginForm
    }
  }
</script>

<style>

</style>
